import { Component, Input, OnInit,AfterViewInit, ViewChild,ElementRef } from '@angular/core';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss']
})
export class ButtonComponent implements AfterViewInit {
  //  @ViewChild  和  AfterViewInit  一起使用
  //@ViewChild可以获取到当前组件视图中的单个元素
  /**
   * 导入 模板引用变量  novaButton
   */
  @ViewChild("novaButton")
  //buttonComp novaButton的别名  ElementRef  获取指定dom
  buttonComp!:ElementRef 
   
  @Input("colorn") colorn:any
  @Input("labe") labe:any
  constructor(){
    
  }
  // ngAfterViewInit() 初始化完组件视图及其子视图之后调用
  ngAfterViewInit(): void {
    console.log(this.colorn)
    // .nativeElement  获取元素
    let buttonEl = this.buttonComp.nativeElement 
    if(buttonEl){
      switch (this.colorn) {
        case "primary":
          buttonEl.style.backgroundColor = "red"
          buttonEl.style.color = "black"
          break;
        case "warn":
          buttonEl.style.backgroundColor = "aqua"
          buttonEl.style.color = "black"
          break;
        case "danger":
          buttonEl.style.backgroundColor = "yellow"
          buttonEl.style.color = "black"
          break;
          case "success":
          buttonEl.style.backgroundColor = "green"
          buttonEl.style.color = "black"
          break;
          case "info":
          buttonEl.style.backgroundColor = "pink"
          buttonEl.style.color = "black"
          break;
        default:
          break;
      }
    }
  }

 
}
